<template>
  <div class="course-content">
    <van-form @submit="onSubmit">
      <!-- 原始报告 -->
      <van-cell-group title="原始报告">
        <van-cell>
          <span>{{desValue}}</span>
        </van-cell>
      </van-cell-group>

      <!-- 解读后报告 -->
      <van-cell-group title="解读后报告">
        <van-cell>
          <span>{{gptValue}}</span>
        </van-cell>
      </van-cell-group>
      <van-cell-group title="请对“解读后报告”进行标价">
        <van-cell>
          1、报告内容是否清晰明了且语言易于理解？
          <van-radio-group v-model="reportClarityInfo" direction="horizontal">
            <van-radio name="非常不清晰">非常不清晰</van-radio>
            <van-radio name="稍显不清晰">稍显不清晰</van-radio>
            <van-radio name="一般">一般</van-radio>
            <van-radio name="大多数能理解">大多数能理解</van-radio>
            <van-radio name="非常清晰">非常清晰</van-radio>
          </van-radio-group>
        </van-cell>
        <van-cell>
          2、您是否能理解其所表达的医疗信息？
          <van-radio-group v-model="medicalInfoUnderstandingInfo" direction="horizontal">
            <van-radio name="完全不理解">完全不理解</van-radio>
            <van-radio name="大多数不理解">大多数不理解</van-radio>
            <van-radio name="一般">一般</van-radio>
            <van-radio name="较为清晰">较为清晰</van-radio>
            <van-radio name="完全理解">完全理解</van-radio>
          </van-radio-group>
        </van-cell>
        <van-cell>
          3、在帮助您理解您的健康状况和下一步行动计划方面的有用程度如何？
          <van-radio-group v-model="healthActionPlanUsefulnessInfo" direction="horizontal">
            <van-radio name="完全没理解">完全没理解</van-radio>
            <van-radio name="稍微有些帮助">稍微有些帮助</van-radio>
            <van-radio name="一般">一般</van-radio>
            <van-radio name="较有帮助">较有帮助</van-radio>
            <van-radio name="非常有帮助">非常有帮助</van-radio>
          </van-radio-group>
        </van-cell>
        <van-cell>
          4、相较于原始报告，您更倾向于阅读哪一类报告？
          <van-radio-group v-model="reportPreferenceInfo" direction="horizontal">
            <van-radio name="原始报告">原始报告</van-radio>
            <van-radio name="解读后报告">解读后报告</van-radio>
          </van-radio-group>
        </van-cell>
      </van-cell-group>
      <van-button type="primary" round block native-type="submit">提交</van-button>
    </van-form>
  </div>
</template>

<script>
import { getAllAds, getQueryCourses } from '@/services/course'
import { Notify } from 'vant'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Course',
  data () {
    return {
      desValue: '',
      gptValue: '',
      id: '',
      gptValueId: '',
      clarity: '',
      age: '',
      gender: '',
      education: '',
      occupation: '',
      readBefore: '',
      reportClarityInfo: '',
      medicalInfoUnderstandingInfo: '',
      healthActionPlanUsefulnessInfo: '',
      reportPreferenceInfo: ''
    }
  },
  created () {
    if (this.$route.query.age) this.age = this.$route.query.age
    if (this.$route.query.gender) this.gender = this.$route.query.gender
    if (this.$route.query.education) this.education = this.$route.query.education
    if (this.$route.query.occupation) this.occupation = this.$route.query.occupation
    if (this.$route.query.readBefore) this.readBefore = this.$route.query.readBefore
    this.loadData()
  },
  computed: {
  },
  methods: {
    async loadData () {
      const response = await getAllAds()
      if (response.data.code === 200) {
        this.desValue = response.data.data.desValue
        this.gptValue = response.data.data.gptValue
        this.id = response.data.data.id
        this.gptValueId = response.data.data.gptValueId
      }
    },
    async onSubmit () {
      const response = await getQueryCourses({
        gptSort: this.gptValueId,
        gptCtId: this.id,
        age: this.age,
        gender: this.gender,
        educationLevel: this.education,
        occupation: this.occupation,
        readRadiologyReportBefore: this.readBefore,
        reportClarityInfo: this.reportClarityInfo,
        medicalInfoUnderstandingInfo: this.medicalInfoUnderstandingInfo,
        healthActionPlanUsefulnessInfo: this.healthActionPlanUsefulnessInfo,
        reportPreferenceInfo: this.reportPreferenceInfo
      })
      if (response && response.data && response.data.code === 200) {
        Notify({ type: 'success', message: '评价成功' })
        await this.$router.push({ name: 'success' })
      } else {
        Notify({ type: 'danger', message: '评价失败' })
        // 处理没有code的情况或者code不是200的情况
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.my-swipe {
  width: 100%;
}

.my-swipe .van-swipe-item {
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.my-swipe img {
  height: 170px;
  margin: 0 auto;
}

// 底部课程列表的位置样式，不应该设置在组件内容
.course-content-list {
  top: 220px;
  bottom: 50px;
}
</style>
